<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="author" content="featon inc.">
	<link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="/static/vendor/metismenu/metisMenu.min.css">
	<link rel="stylesheet" href="/static/vendor/metismenu/mm-vertical.css">
	<link rel="stylesheet" href="/static/vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="/static/vendor/skin/ftskin.css">
	<link rel="stylesheet" href="/static/vendor/custom-scrollbar/jquery.mCustomScrollbar.min.css">
	<title></title>
</head>
<body>

<div class="sidebar" id="sidebar" style="height: 700px;">
	<nav class="sidebar-nav">
		<ul class="metismenu" id="side-menu">
			
			
		</ul>
	</nav>
</div>


<script src="/static/vendor/jquery/jquery-2.1.3.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/metismenu/metisMenu.min.js"></script>
<script src="/static/vendor/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

<script>
jQuery(function($){
	init_page();
	initCurrMenu();
});

$(window).resize(function(){
	init_page();
});

function init_page()
{
    var window_height = $(window).height();

    $("#sidebar").css("height",window_height-1);
	
	$("#sidebar").mCustomScrollbar({
		//theme:"dark",axis:"y"
		theme:"minimal-dark",axis:"y"
	});
	
}

$(function() {
    $('#side-menu').metisMenu();
	$('#side-menu li ul li').on('click',"a", function() {
	  	$('#side-menu .mm-active').removeClass("mm-active");
	  	$(this).addClass("mm-active");
	  	$('#side-menu li ul li a i').removeClass("fa-angle-double-right");
	  	$(this).find("i").addClass("fa-angle-double-right");
		if(typeof($(this).attr("url"))!="undefined")
		{
			top.showMainFrame($(this).attr("url"));

			var deep = $(this).attr("deep");
			var parent_obj = $(this).parent().parent().parent();
			if(deep == 2)
				top.setCurPositionText(parent_obj.find('a').eq(0).text()+" <i class='fa fa-angle-double-right'></i> "+$(this).text());
			if(deep == 3)
				top.setCurPositionText(parent_obj.parent().parent().find('a').eq(0).text()+" <i class='fa fa-angle-double-right'></i> "+parent_obj.find('a').eq(0).text()+" <i class='fa fa-angle-double-right'></i> "+$(this).text());
		}
	});
	
	
});


function initCurrMenu()
{
	$("#sidebar-title").text(top.current_menu_text);
	
	var menu_json = top.getChildMenuJson();
	
	var str = "";
	//console.log(JSON.stringify(menu_json));
	if(menu_json.children == null)
	{
		return;
	}
	
	$.each(menu_json.children, function(i,item){
		str += getMenuHtml(item,1);
	});

	$("#side-menu").html(str);
	var first_li = $("#side-menu li").eq(0);
	first_li.addClass('mm-active');
	first_li.find('ul').eq(0).addClass('mm-show');

	
}

function getMenuHtml(item,deep)
{
	var str = '';
	
	if(item.children == null)
	{
		str += '<li>';
		str += '<a href="javascript:void(0);" url="'+item.attributes.url+'" aria-expanded="false" deep="'+deep+'"><i class="fa '+item.attributes.thumb+'"></i> '+item.text+'</a>';		
		str += '</li>';
	}else{
		str += '<li>';
		str += '<a class="has-arrow" href="javascript:void(0);" aria-expanded="false"><i class="fa '+item.attributes.thumb+'"></i> '+item.text+'</a>';
		str += '<ul class="mm-collapse">';
		for(var i=0;i<item.children.length;i++)
		{
			str += getMenuHtml(item.children[i],deep+1);	
		}
		str += '</ul>';
		str += '</li>';
	}
	return str;
}


</script>
</body>
</html>
